<template>
  <div class="inline-grid">
    <h3>grid-column布局</h3>
    <div class="inline-grid-content">
      <div v-for="item in 6" :key="item" :class="'item' + item">{{ item }}</div>
    </div>
    <br>
    <pre>
      <font color="red">用法：grid-column 包头不包尾</font>
      grid-column:grid-column-start / grid-column-end;
      grid-column: 1 / 3;
      代表该单元格从第一根线开始，到第三根线结束，包含前面两个单元格的位置
    </pre>
  </div>
</template>
<script>
export default {
  name: 'GridColumn',
  data(){
    return {}
  },
  mounted(){
    
  }
}
</script>
<style lang="less" scoped>
.inline-grid {
  &-content {
    display: grid;
    grid-template-columns: repeat(4, 150px);
    gap: 10px;
    margin-top: 10px;
    div {
      background-color: red;
    }
    .item5 {
      grid-column: 1 / 3;
    }
    .item6 {
      grid-column: 3 / 5;
    }
  }
  pre{
    line-height: 20px;
  }
}
</style>
